<template>
	<view class="interace-btn">
		<view class="like-btn active" v-if="isLikeShow" @click="likeClick()">
			<text class="like-num">10</text>
		</view>
		<view class="comment-btn" v-if="isCommentShow" @click="commentClick()">
			<text class="comment-num">20</text>
		</view>
		<view class="chat-btn" v-if="isChatShow" @click="chatClick()">
			<text>私信</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props: {
			isLikeShow: {
				type: Boolean,
				default: true
			},
			isCommentShow: {
				type: Boolean,
				default: true
			},
			isChatShow: {
				type: Boolean,
				default: true
			}
		},
		methods: {
			likeClick() {
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.interace-btn {
		display: flex;
		color: #c4c4c4;
	}
		
	.interace-btn .like-btn {
		position: relative;
		margin-right: 120rpx;
		margin-left: 50rpx;
	}
	
	.interace-btn .like-btn::before,
	.interace-btn .comment-btn::before,
	.interace-btn .chat-btn::before{
		position: absolute;
		content: '';
		top: -5rpx;
		left: -55rpx;
		width: 50rpx;
		height: 50rpx;
		background-size: contain;
	}
	
	.interace-btn .like-btn::before {
		background-image: url('@/static/images/tabicon/unlikegray.png');
	}
	
	.interace-btn .like-btn.active {
		color: #101829;
	}
	
	.interace-btn .like-btn.active::before {
		background-image: url('@/static/images/tabicon/like.png');
	}
	
	.interace-btn .comment-btn {
		position: relative;
		margin-right: 120rpx;
	}
	
	.interace-btn .comment-btn::before {
		top: 5rpx;
		width: 35rpx;
		height: 35rpx;
		background-image: url('@/static/images/common/comment.png');
	}
	
	.interace-btn .chat-btn {
		position: relative;
	}
	
	.interace-btn .chat-btn::before {
		width: 45rpx;
		height: 45rpx;
		background-image: url('@/static/images/common/chat.png');
	}
</style>